<template>
    <div ref="containerRef" class="screen-left">
        <component
            :is="item.component"
            v-for="item in components"
            :key="item.name"
            :class="item.className"
            :name="item.name"
        >
            <Left1 />
        </component>
    </div>
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { useSortable } from '@/hooks/useSortable';

    import Left1 from './left1.vue';
    import Left2 from './left2.vue';
    import Left4 from './left4.vue';

    const components = shallowRef([
        { name: 'left1', component: Left1, className: 'screen-left-item' },
        { name: 'left2', component: Left2, className: 'screen-left-item' },
        { name: 'left4', component: Left4, className: 'screen-left-item2' },
    ]);

    const { containerRef } = useSortable(components);
</script>

<style lang="less">
    .screen-left {
        width: 100%;
        height: 100%;

        .screen-left-item {
            width: 100%;
            height: 28%;
            // background-color: var(--es-block-bg);
            //padding: 16px;
            animation-name: slide;

            & + & {
                margin-top: 20px;
            }
        }

        .screen-left-item2 {
            width: 100%;
            height: 30%;
            // background-color: var(--es-block-bg);
            padding: 16px;
            animation-name: slide;

            & + & {
                margin-top: 20px;
            }
        }
    }
</style>
